<template>
    <div class="box">
        <div class="query-box">
            <div class="line-center">
                <el-row>
                    <el-form ref="userQueryForm" :model="userQueryForm" size="small" label-width="80px">
                        <el-col :span="4">
                            <el-form-item label="用户名" style="width: 220px;">
                                <el-input clearable v-model="userQueryForm.userName" placeholder="请输入用户名"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="性别" style="width: 220px;">
                                <el-select clearable v-model="userQueryForm.sex" placeholder="请选择性别">
                                    <el-option label="女" value="0"></el-option>
                                    <el-option label="男" value="1"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="3">
                            <el-form-item label="角色" style="width: 220px;">
                                <el-select clearable v-model="userQueryForm.role" placeholder="请选择发布状态">
                                    <el-option v-for="(item, index) in role" :key="index" :label="item.roleName"
                                        :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item>
                                <el-button @click="querySubmit" type="primary" plain
                                    icon="el-icon-search">搜索</el-button>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-button @click="HandleBatchDelete" type="danger" plain size="small"
                                icon="el-icon-delete">批量删除</el-button>
                        </el-col>
                        <el-col :span="3"><el-button @click="showDrawer" type="success" plain size="small"
                                icon="el-icon-plus">添加用户</el-button></el-col>
                    </el-form>
                </el-row>
            </div>
        </div>

        <!-- 数据表格 -->
        <div class="table">
            <TableComponent @columnIds="getColumnIds" :loading="tableLoading" :table-data="userRespData"
                :column="userColumn">
                <template v-slot:operate="{ row }">
                    <el-button @click="changeUserCoumn(row.id)" type="text" size="small">
                        编辑
                    </el-button>
                    <el-button @click="logicDeleteUser(row.id)" style="color: red;" type="text" size="small">
                        删除
                    </el-button>
                </template>
            </TableComponent>

            <PaginationComponent :page-query="userQueryForm" :page-total="userTotal" @handleSizeChange="sizeChange"
                @handleCurrentChange="currentChange"></PaginationComponent>
        </div>

        <!-- 侧边框 -->
        <DrawerComponent :image-url="userForm.img" :title="drawerTitleFlag ? '添加用户' : '编辑用户'" @drawerSubmit="formSubmit"
            :config="drawerConfig" @handleClose="drawerClosed" :form="userForm" :form-column="userFormColumn"
            :rules="rulesForm">

        </DrawerComponent>
    </div>
</template>
<script>
import { mapActions, mapState } from 'vuex'
import DrawerComponent from '@/components/DrawerComponent.vue';
import TableComponent from '@/components/TableComponent.vue';
import PaginationComponent from '@/components/PaginationComponent.vue';
import { queryUserById } from '@/api/admin/common'
import { message, messageType } from '@/utils/message'
export default {
    components: {
        DrawerComponent,
        TableComponent,
        PaginationComponent,
    },
    data() {
        return {
            userQueryForm: {
                userName: '',
                role: '',
                sex: '',
                page: 1,
                pageSize: 10,
            },
            userFormColumn: [
                { label: '用户名', prop: 'userName', inputType: 'text', placeholder: '请输入用户名', type: 'Input', width: '300px' },
                { label: '密码', prop: 'userPwd', inputType: 'password', placeholder: '请输入密码', type: 'Input', width: '300px' },
                { label: '电话号码', prop: 'phone', inputType: 'text', placeholder: '请输入电话号码', type: 'Input', width: '300px' },
                { label: '性别', prop: 'sex', type: 'Select', placeholder: '请选择性别', optionLabel: [{ label: '女', value: '0' }, { label: '男', value: '1' }], width: '300px' },
                { label: '角色', prop: 'role', type: 'Select', placeholder: '请选择角色', optionLabel: [{ label: '用户', value: '1' }, { label: '管理员', value: '2' }], width: '300px' },
                { label: '图片', prop: 'img', type: 'upload', placeholder: '请上传图片' },
            ],
            userForm: {
                userName: '',
                userPwd: '',
                phone: '',
                sex: '',
                role: '',
                img: '',
            },
            rulesForm: {
                userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
                userPwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
                phone: [{ required: true, message: "请输入电话号码，号码为11位数", trigger: "blur" }],
                sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
                role: [{ required: true, message: "请选择角色", trigger: "blur" }],
                img: [{ required: true, message: "请上传图片", trigger: "blur" }],
            },
            userColumn: [
                { prop: 'userName', label: '用户名', width: '120' },
                { prop: 'userPwd', label: '密码', width: '120' },
                { prop: 'img', label: '图片', width: '120' },
                { prop: 'phone', label: '电话号码', width: '120' },
                { prop: 'sex', label: '性别', sex: ['女', '男'], width: '120' },
                { prop: 'role', label: '角色', width: '120' },
                { prop: 'creditScore', label: '信誉分', width: '120' },
                { prop: 'serviceDuration', label: '服务时长', width: '120' },
                { prop: 'createTime', label: '创建时间', width: '200' },
                { prop: 'updateTime', label: '修改时间', width: '200' },
                // { prop: 'createUser', label: '创建人', width: '120' },
                // { prop: 'updateUser', label: '修改人', width: '120' },
            ],
            tableLoading: true,
            drawerTitleFlag: true,
            drawerConfig: {
                size: '30%',
                drawer: false,
                direction: 'rtl',
            },
            imageUrl: '',
            columnIds: [],
        }
    },
    mounted() {
        this.pageQueryUserListActions(this.userQueryForm);
        this.queryRoleActions();
    },
    computed: {
        ...mapState('user', ['userRespData', 'userTotal', 'role']),
    },
    methods: {
        ...mapActions('user', ["pageQueryUserListActions", "addUserActions", "updateUserActions", "queryRoleActions", "logicDelUserActions", "logicBatchDeleteUserByIds"]),

        /**
         * 表单提交事件
         */
        formSubmit(form) {
            console.log('form-->', form);
            // 发起请求，提交表单
            if (this.drawerTitleFlag) {
                this.addUserActions(form);
            } else {
                this.updateUserActions(form);
            }
            setTimeout(() => {
                this.drawerClosed();
                this.pageQueryUserListActions(this.userQueryForm);
            }, 1000);
        },
        logicDeleteUser(id) {
            console.log('id-->', id);
            this.logicDelUserActions(id)
            setTimeout(() => {
                message(messageType().success, '操作成功');
                this.pageQueryUserListActions(this.userQueryForm);
            }, 1000);

        },
        querySubmit() {
            this.pageQueryUserListActions(this.userQueryForm);
        },
        HandleBatchDelete() {
            this.logicBatchDeleteUserByIds(this.ids)
            setTimeout(() => {
                message(messageType().success, '操作成功');
                this.pageQueryUserListActions(this.userQueryForm);
            }, 1000);
        },
        getColumnIds(ids) {
            this.ids = ids
        },
        //修改用户信息
        async changeUserCoumn(id) {
            await queryUserById(id).then(resp => {
                if (!resp) return;
                console.log('->', resp.data.data);
                this.userForm = resp.data.data;
                this.userForm.sex = String(resp.data.data.sex);
                this.userForm.role = String(resp.data.data.role);
            }, error => {
                console.log(error);
            })
            this.drawerTitleFlag = false;
            this.drawerConfig.drawer = true;
        },
        /**
         * 下拉框事件
         */
        /* selectChange() {
            console.log(this.userQueryForm);
            this.$store.dispatch('user/pageQueryUserListActions', this.userQueryForm)
        }, */

        // 侧边框展开事件
        showDrawer() {
            this.drawerConfig.drawer = true;
            this.drawerTitleFlag = true;
            console.log(this.drawerConfig.drawer);

        },
        /**
         * 侧边框关闭事件
         */
        drawerClosed() {
            this.drawerConfig.drawer = false;
        },
        closLoading() {
            this.tableLoading = false;
        },

        /**
         *  分页查询
         */
        // 每页条数
        sizeChange(val) {
            this.userQueryForm.pageSize = val;
            this.$store.dispatch('user/pageQueryUserListActions', this.userQueryForm)
        },
        // 当前页
        currentChange(val) {
            this.userQueryForm.page = val;
            this.$store.dispatch('user/pageQueryUserListActions', this.userQueryForm)
        }
    },

}
</script>
<style lang="scss">
.box {
    width: 100%;

    .query-box {
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        height: 55px;
        margin: 10px;

        .line-center {
            padding: 10px 10px 10px 5px;
        }
    }

    .table {
        margin: 10px;
        max-height: calc(100vh - 55px - 55px - 30px - 30px);
        // height: 780px;
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

        .page-box {
            text-align: center;
        }

        // 表格图片
        .el-image__error,
        .el_image,
        img {
            width: 60px;
            height: 60px;
            // border-radius: 50%;
        }
    }
}
</style>